<template>
	<div class="fenxi">
		<div class="fenxi-box">
			<div class="fenxi-box-tit">
				<h3>交战历史</h3>
			</div>
			<template  v-if='tableList.length > 0'>
				<div class="Progress">
					<div class="prgress-txt">
						<span class="win-txt">{{ AgainstHistory.win }}胜</span>
						<span class="draw-txt">{{ AgainstHistory.draw }}平</span>
						<span class="lose-txt">{{ AgainstHistory.lose }}负</span>
					</div>
					<div class="prgress-bg" >
						<span class="win" :data-value='AgainstHistory.win' id="win"></span>
						<span class="draw" :data-value='AgainstHistory.draw' id="draw"></span>
						<span class="lose" :data-value='AgainstHistory.lose'id="lose"></span>
					</div>
				</div>
				<div class="table" v-if='tableList'>
					<table>
						<tr>
							<th>日期</th>
							<th>赛事</th>
							<th>主队</th>
							<th>比分</th>
							<th>客队</th>
						</tr>
						<tr v-for='(item,index) in tableList'>
							<td>{{ item.mt }}</td>
							<td>{{item.ln}}</td>
							<td>{{ item.hz}}</td>
							<td>
								<p 
									:class="item.mrs=='负'?'lose blocks':item.mrs=='胜'?'win blocks':'draw blocks'"
								>
								{{ item.hm_fs | textNull }}:
								{{ item.aw_fs | textNull }}
								</p>
							</td>
							<td>{{ item.az }}</td>
						</tr>
					</table>
				</div>
			</template>
			<div v-else class="noData">暂无数据！</div>
		</div>
		
		<div class="fenxi-box">
			<template v-if='HomeInfo'>
				<div class="fenxi-box-tit">
					<h3>{{ RecentAllHome.name | textNull }}近期战绩</h3>
					<div class="left">
						<span 
							:class="HomeCurrent==0?'hover':''"
							@click='changeData(1,0)'
						>全部</span>
						<span>|</span>
						<span 
							:class="HomeCurrent==1?'hover':''"
							@click='changeData(1,1)'
						>主场</span>
					</div>
				</div>
				<div class="circle" id="chart_example_Home">
				</div>
				<div class="table">
					<table>
						<tr>
							<th>日期</th>
							<th>赛事</th>
							<th>主队</th>
							<th>比分</th>
							<th>客队</th>
						</tr>
						<tr v-for='(item,index) in HomeInfo.zj'>
							<td>{{item.mt}}</td>
							<td>{{ item.ln}}</td>
							<td>{{ item.hz}}</td>
							<td>
								<p 
									:class="item.mrs=='负'?'lose blocks':item.mrs=='胜'?'win blocks':'draw blocks'"
								>
								{{ item.hm_fs | textNull }}:
								{{ item.aw_fs | textNull }}
								</p>
							</td>
							<td>{{ item.az }}</td>
						</tr>
					</table>
				</div>
			</template>
			<div v-else class="noData">暂无数据！</div>
		</div>
		
		
		<div class="fenxi-box">
			<template v-if='AwayInfo'>
				<div class="fenxi-box-tit">
					<h3>{{ RecentAllAway.name | textNull }}近期战绩</h3>
					<div class="left">
						<span 
							:class="AwayCurrent==0?'hover':''"
							@click='changeData(2,0)'
						>全部</span>
						<span>|</span>
						<span 
							:class="AwayCurrent==1?'hover':''"
							@click='changeData(2,1)'
						>客场</span>
					</div>
				</div>
				<div class="circle" id="chart_example_Away">
				</div>
				<div class="table">
					<table>
						<tr>
							<th>日期</th>
							<th>赛事</th>
							<th>主队</th>
							<th>比分</th>
							<th>客队</th>
						</tr>
						<tr v-for='(item,index) in AwayInfo.zj'>
							<td>{{item.mt}}</td>
							<td>{{ item.ln}}</td>
							<td>{{ item.hz}}</td>
							<td>
								<p 
									:class="item.mrs=='负'?'lose blocks':item.mrs=='胜'?'win blocks':'draw blocks'"
								>
								{{ item.hm_fs | textNull }}:
								{{ item.aw_fs | textNull }}
								</p>
							</td>
							<td>{{ item.az }}</td>
						</tr>
					</table>
				</div>
			</template>
			<div v-else class="noData">暂无数据！</div>
		</div>
	</div>
</template>
<script>
import axios from 'axios'
import echarts from 'echarts'
import { Toast,Indicator  } from 'mint-ui'
export default {
	name: 'deatilFenxi',
	components:{
	},
	props:{
		AgainstHistory:Object,
      	tableList:Array,
      	RecentAllHome:Object,
      	RecentAllAway:Object,
      	LeagueTable:Array,
    },
	data: function(){
		return {
			RecentAllHomes:null,
			RecentAllAways:null,
			HomeCurrent:0,
			AwayCurrent:0,
			Homecircle0:{
				'win':2,
				'lose':3,
				'draw':4
			},
			Homecircle1:{
				'win':7,
				'lose':3,
				'draw':9
			},
			HomeEChart:{},
			AwayEChart:{},
		}
	},
	computed:{
		HomeInfo:function(){
			if (this.RecentAllHomes === null) {
				return this.RecentAllHome
			}else{
				return this.RecentAllHomes
			}
			
		},
		AwayInfo:function(){
			if (this.RecentAllAways === null) {
				return this.RecentAllAway
			}else{
				return this.RecentAllAways
			}
		}
	},
	methods:{
		//球队主场或客场战绩
		//type 1代表主场球队主场的战绩，2代表客场球队客场的战绩
		getHistoryMatch:function(id,type,obj){
			var t = this;
			var obj;
			axios.get('/api/getHistoryMatch.php',{
				params:{
					'id':id,
					'court':type
				}})
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						if (type==1) {
							t.RecentAllHomes = data;
						}
						if (type==2) {
							t.RecentAllAways = data;
						}
					}else{
						Toast(res.message)
						if (type==1) {
							t.RecentAllAways = '';
						}
						if (type==2) {
							t.RecentAllAways = '';
						}
					}
				})
				.catch(function (error) {
				    console.log(error);
				});
		},
		changeData:function(type,navIndex){
			// 
			var id = this.$route.params.id;	
			if (type == 1) {
				if (navIndex == 0) {
					this.RecentAllHomes = null;
					this.HomeCurrent = 0;
				}else if(navIndex == 1){
					this.getHistoryMatch(id,type)
					this.HomeCurrent = 1;
				}	
			}
			if (type == 2) {
				if (navIndex == 0) {
					this.RecentAllAways = null;
					this.AwayCurrent = 0;
				}else if(navIndex == 1){
					this.getHistoryMatch(id,type)
					this.AwayCurrent = 1;
				}	
			}
		},
		setcircle(obj){
			let	option = {
				legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: ['胜','平','负']
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{b}:{c}"
			    },
			    series : [
			        {
			            name: '战绩',
			            type: 'pie',
			            radius : '80%',
			            center: ['60%', '50%'],
			            data:[
			                {value:obj.win, name:'胜',itemStyle:{color:'#f00'}},
			                {value:obj.draw, name:'平',itemStyle:{color:'#008eff'}},
			                {value:obj.lose, name:'负',itemStyle:{color:'#13b665'}},
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
			return option;
		}
	},
	mounted(){

	},
	updated(){
		
		//近期战绩
		//当数据变换时，饼图也要相应的改变，所以放在这个钩子函数里
		let t = this
		let myChartH = echarts.init(document.getElementById('chart_example_Home'));
		let optionH = t.setcircle({"win":t.HomeInfo.win,'draw':t.HomeInfo.draw,"lose":t.HomeInfo.lose})
		myChartH.setOption(optionH);
		t.HomeEChart = myChartH

		let myChartA = echarts.init(document.getElementById('chart_example_Away'));
		let optionA = t.setcircle({"win":t.AwayInfo.win,'draw':t.AwayInfo.draw,"lose":t.AwayInfo.lose})
		myChartA.setOption(optionA);
		t.AwayEChart = myChartA	

		//交战历史
		if (this.AgainstHistory.draw == 0 && this.AgainstHistory.lose == 0 &&this.AgainstHistory.win==0) {
			return false
		}
		//进度条样式
		let winVal = $('.win').attr('data-value'),
			loseVal = $('.lose').attr('data-value'),
			drawVal = $('.draw').attr('data-value');
		$('.win,.win-txt').css({'flex':winVal})
		$('.lose,.lose-txt').css({'flex':loseVal})
		$('.draw,.draw-txt').css({'flex':drawVal})
		if (winVal == 0) {
			$('#win,.win-txt').hide()
		}
		if (loseVal == 0) {
			$('#lose,.lose-txt').hide()
		}
		if (drawVal == 0) {
			$('#draw,.draw-txt').hide()
		}
	}
};
</script>

<style lang="less" scoped>
	@import '~styles/varibles.less';
	.fenxi-box{
		border-bottom: .2rem @bggray solid;
		padding: .2rem 0 0;
		h3{
			font-size: .3rem;
			color: #4E4E4E;
			font-weight: bold;
			padding:.2rem .2rem;
		}
	}
	.fenxi-box-tit{
		.left{
			margin-top: .2rem;
			text-align: left;
			margin-left: .2rem;
			.hover{
				color: @greenColor;
				font-weight: bold;
			}
		}
	}
	.Progress{
		padding:.3rem;
		.prgress-txt{
			display: flex;
			color: @grayColor;
			span{
				text-align: left;
				margin: 0;
			}
		}
		.prgress-bg{
			display: flex;
			height: .2rem;
			border-radius: .1rem;
			overflow: hidden;
			background-color:@bggray;
			margin-top: .2rem;
			span{
				flex: 0;
				height:100%;
				transition: all 1s;
				margin: 0;
				&.win{
					background-color:#f00;
				}
				&.lose{
					background-color:#13b665;
				}
				&.draw{
					background-color:#008eff;
				}
			}
		}
	}
	.circle{
		margin: .2rem;
		width: 7.1rem;
		height: 200px;
	}
	table{
		.block{
			display: block;
		    width: 0.36rem;
		    height: 0.36rem;
		    margin: auto;
		    text-align: center;
		    line-height: 0.36rem;
		    background-color:@greenColor;
		    color: #fff;
		}
		p{
			font-weight: bold;
		}
		.blocks{
			display: inline-block;
			margin:auto;
			padding:.1rem .2rem;
		}
		.win{
			background-color:#f00;
			color: #fff;
		}
		.lose{
			background-color:#13b665;
			color: #fff;
		}
		.draw{
			background-color:#008eff;
			color: #fff;
		}
		.hover{
			background-color:@greenColor;
			td{
				color: #fff;
			}
			.block{
				background-color:#fff;
				color: @greenColor;
			}
		}
	}
</style>